<div class="row">
    <div class="col-md-12">
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">List of organisations ({{$vm.list.values.length || 0}} of {{$vm.list.total}})</h3>
            </div>
            <div class="box-body">
                <div ng-include="'views/partials/admin/organisation/list/toolbar.html'"></div>

                <div class="mt-xs filter-panel" ng-include="'views/partials/admin/organisation/list/filters.html'" ng-show="$vm.filtering.context.showFilters"></div>

                <!-- Filters preview  -->
                <div class="row mt-xs">
                    <div class="col-md-12 clearfix">
                        <filters-preview filters="$vm.filtering.context.filters"
                            on-clear-item="$vm.removeFilter(field)"
                            on-clear-all="$vm.clearFilters()"></filters-preview>
                    </div>
                </div>

                <!-- Datalist  -->
                <div class="row mt-s">
                    <div class="col-md-12">
                        <psearch control="$vm.list"></psearch>

                        <table class="table table-striped case-list">
                            <thead>
                                <tr>
                                    <th>
                                        <a href class="text-default" ng-click="$vm.sortByField('name')">
                                            Name
                                            <i ng-show="$vm.filtering.context.sort.indexOf('+name') === -1 && $vm.filtering.context.sort.indexOf('-name') === -1" class="fa fa-sort"></i>
                                            <i ng-show="$vm.filtering.context.sort.indexOf('+name') !== -1" class="fa fa-caret-up"></i>
                                            <i ng-show="$vm.filtering.context.sort.indexOf('-name') !== -1" class="fa fa-caret-down"></i>
                                        </a>
                                    </th>
                                    <th style="width: 300px">
                                        <a href class="text-default" ng-click="$vm.sortByField('_createdBy')">
                                            Created By
                                            <i ng-show="$vm.filtering.context.sort.indexOf('+_createdBy') === -1 && $vm.filtering.context.sort.indexOf('-_createdBy') === -1" class="fa fa-sort"></i>
                                            <i ng-show="$vm.filtering.context.sort.indexOf('+_createdBy') !== -1" class="fa fa-caret-up"></i>
                                            <i ng-show="$vm.filtering.context.sort.indexOf('-_createdBy') !== -1" class="fa fa-caret-down"></i>
                                        </a>
                                    </th>
                                    <th style="width: 160px">
                                        Dates

                                        <a href class="text-default ml-xxxs" ng-click="$vm.sortByField('_createdAt')" uib-tooltip="Sort by creation date">
                                            C.
                                            <i ng-show="$vm.filtering.context.sort.indexOf('+_createdAt') === -1 && $vm.filtering.context.sort.indexOf('-_createdAt') === -1" class="fa fa-sort"></i>
                                            <i ng-show="$vm.filtering.context.sort.indexOf('+_createdAt') !== -1" class="fa fa-caret-up"></i>
                                            <i ng-show="$vm.filtering.context.sort.indexOf('-_createdAt') !== -1" class="fa fa-caret-down"></i>
                                        </a>
                                        <a href class="text-default ml-xxxs" ng-click="$vm.sortByField('_updatedAt')" uib-tooltip="Sort by last update date">
                                            U.
                                            <i ng-show="$vm.filtering.context.sort.indexOf('+_updatedAt') === -1 && $vm.filtering.context.sort.indexOf('-_updatedAt') === -1" class="fa fa-sort"></i>
                                            <i ng-show="$vm.filtering.context.sort.indexOf('+_updatedAt') !== -1" class="fa fa-caret-up"></i>
                                            <i ng-show="$vm.filtering.context.sort.indexOf('-_updatedAt') !== -1" class="fa fa-caret-down"></i>
                                        </a>
                                    </th>
                                    <th style="width: 250px"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="org in $vm.list.values">
                                    <td>
                                        <div class="org-name">
                                            <a ui-sref="app.administration.organisations-details({organisation: org.name})">{{::org.name}}</a>
                                        </div>
                                        <div class="org-description text-muted">
                                            {{::org.description || 'No description'}}
                                        </div>
                                        <div class="mt-xs" ng-if="org.links.length > 0">
                                            <span class="text-muted mr-xxs">Linked organisations:</span>
                                            <span class="label label-default mr-xxs" ng-repeat="link in ::org.links | orderBy">{{link}}</span>
                                        </div>
                                        <div class="mt-xs" ng-if="org.links.length === 0">
                                            <span class="text-muted mr-xxs">Linked organisations:</span>
                                            <span class="text-warning"><em>None</em></span>
                                        </div>
                                    </td>

                                    <td class="clearfix">
                                      <user user-id="org._createdBy" icon-only="false" icon-size="m"></user>
                                    </td>
                                    <td>
                                        <div ng-class="{'text-bold': $vm.filtering.context.sort.indexOf('+_createdAt') !== -1 || $vm.filtering.context.sort.indexOf('-_createdAt') !== -1}">
                                            C. <a href ng-click="$vm.addFilterValue('_createdAt', org._createdAt)">{{org._createdAt | shortDate}}</a>
                                        </div>
                                        <div ng-if="org._updatedAt > 0" ng-class="{'text-bold': $vm.filtering.context.sort.indexOf('+_updatedAt') !== -1 || $vm.filtering.context.sort.indexOf('-_updatedAt') !== -1}">
                                            U. <a href ng-click="$vm.addFilterValue('_updatedAt', org._updatedAt)">{{org._updatedAt | shortDate}}</a>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="mr-xs text-primary">
                                            <a ui-sref="app.administration.organisations-details({organisation: org.name})">
                                                <i class="fa fa-cog"></i> Configure
                                            </a>
                                        </span>
                                        <span class="clickable mr-xs text-primary" ng-click="$vm.showNewOrg('edit', org)">
                                            <i class="fa fa-edit"></i> Edit</span>
                                        <span class="clickable mr-xs text-primary" ng-click="$vm.showLinks(org)" ng-if="org.name !== 'admin'">
                                            <i class="fa fa-link"></i> Link</span>
                                        <!-- <a class="btn btn-xs btn-icon btn-clear" href ng-click="$vm.showNewOrg('edit', org)" >
                                            <i class="text-info text-20 fa fa-edit"></i>
                                        </a> -->
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <psearch control="$vm.list"></psearch>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
